<template>
  <div class="all-box">
    <div class="box">
      <!--面包屑 -->
      <el-breadcrumb class="mian" separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>活动管理</el-breadcrumb-item>
        <el-breadcrumb-item>活动列表</el-breadcrumb-item>
        <el-breadcrumb-item>活动详情</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 第一板块 -->
      <div class="top-box">
        <div class="t-l">
          <div class="g-s-t">
            <img src="" class="g-img" alt="" />
            <div class="sm-img-box">
              <div v-for="item in imgURL" :key="item.id">
                <img :src="item.url" alt="" class="sm-img" />
              </div>
            </div>
          </div>
          <!-- <div class="spec-preview"> -->
          <!-- //图片地址 -->
          <!-- <img :src="ImageList.imgUrl" /> -->
          <!-- //定义鼠标事件 -->
          <!-- <div class="event" @mousemove="handler"></div> -->
          <!-- //定义放大后的图样式 -->
          <!-- <div class="big"> -->
          <!-- //放大后的图的原始图片 -->
          <!-- <img :src="ImageList.imgUrl" ref="big" /> -->
          <!-- </div> -->
          <!-- 遮罩层 -->
          <!-- <div class="mask" ref="mask"></div> -->
          <!-- </div>  -->

          <div class="g-s-b">
            <div class="bb-box">
              <div class="b1">销量人气</div>
              <div class="b2">222+</div>
              <div>
                <i class="el-icon-s-flag"></i>
                <el-link :underline="false" class="b3">销量人气</el-link>
              </div>
            </div>
            <el-divider direction="vertical" class="line"></el-divider>
            <div class="bb-box">
              <div class="b1">商品评价</div>
              <div class="b2">222+</div>
              <div>
                <i class="el-icon-s-flag"></i>
                <el-link :underline="false" class="b3">查看评价</el-link>
              </div>
            </div>
            <el-divider direction="vertical" class="line"></el-divider>
            <div class="bb-box">
              <div class="b1">收藏人气</div>
              <div class="b2">2222</div>
              <div>
                <i class="el-icon-s-flag"></i>
                <el-link :underline="false" class="b3">收藏商品</el-link>
              </div>
            </div>
            <el-divider direction="vertical" class="line"></el-divider>
            <div class="bb-box">
              <div class="b1">品牌信息</div>
              <div class="b2">苏宁易购</div>
              <div>
                <i class="el-icon-s-flag"></i>
                <el-link :underline="false" class="b3">品牌主页</el-link>
              </div>
            </div>
          </div>
        </div>

        <div class="t-r">
          <div class="t-r-t">
            <h2 class="tr1">撞色更轻潮，儿童字母印花运动卫衣1-8岁</h2>
            <p class="tr2">百搭活力多色，上身绚烂春天</p>
            <p class="tr3">
              ￥99.00
              <span class="nopri">￥99.00</span>
            </p>
          </div>

          <div class="t-r-m">
            <div class="g-service">
              <dl>
                <dt>促销</dt>
                <dd>12月好物放送，App领券购买直降120元</dd>
              </dl>
              <dl>
                <dt>配送</dt>
                <dd>
                  <div class="xtx-city">
                    <div class="block">
                      <b
                        style="
                          vertical-align: middle;
                          padding-right: 5px;
                          font-weight: normal;
                        "
                        >至</b
                      >
                      <el-cascader
                        size="mini"
                        class="lian"
                        v-model="value"
                        :options="options"
                        @change="handleChange"
                        placeholder="北京市 市辖区 东城区"
                      ></el-cascader>
                    </div>
                  </div>
                </dd>
              </dl>
              <dl>
                <dt>服务</dt>
                <dd>
                  <span>·</span>
                  <span>无忧退货</span>
                  <span>快速退款</span>
                  <span>免费包邮</span>
                  <a href="javascript:;">了解详情</a>
                </dd>
              </dl>
            </div>
          </div>

          <!-- 动态规格 -->
          <div class="t-r-b" v-for="item in 2" :key="item.id">
            <div class="t-r-b-box">
              <div class="gui-tit">规格</div>
              <div class="guiimg" v-for="item in 5" :key="item.id">
                <img src="" class="gui-img" alt="" />
              </div>
            </div>
          </div>
          <!-- 提交 -->
          <div class="t-r-b-b">
            <div class="t-r-b-b-box">
              <div class="gui-num">数量</div>
              <el-input-number
                size="small"
                v-model="num"
                class="btn-num"
              ></el-input-number>
            </div>
            <el-button class="gocar" :plain="true" @click="open3"
              >加入购物车</el-button
            >
          </div>
        </div>
      </div>
      <!-- 第二板块 -->
      <div class="mid-box">
        <div class="m-tit">
          <h3>同类商品推荐</h3>
        </div>
        <div class="m-ban">
          <!-- :loop='false' :autoplay="false" -->
          <el-carousel indicator-position="outside" interval="7000">
            <el-carousel-item v-for="item in 5" :key="item">
              <el-row>
                <el-col
                  :span="6"
                  v-for="(o, index) in 4"
                  :key="o"
                  :offset="index > 0 ? 2 : 0"
                  class="el-card"
                >
                  <el-card
                    :body-style="{ padding: '70px' }"
                    v-for="item in currentDate"
                    :key="item.id"
                  >
                    <img
                      src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
                      class="image"
                    />
                    <div style="padding: 14px">
                      <div class="bottom clearfix">
                        <div class="time">${{ item.pr }}</div>
                      </div>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
      <!-- 第三板块 -->

      <div class="bottom-box">
        <div class="bot-left">
          <div class="b-l-t">
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="商品详情" name="first">商品详情</el-tab-pane>
              <el-tab-pane label="商品评价(0)" name="second"
                >商品评价( 0 )</el-tab-pane
              >
            </el-tabs>
          </div>
          <div class="bot-bot">
            <div class="goods-warn">
              <h3 class="g-tit">注意事项</h3>
              <p class="tit">• 购买运费如何收取？</p>
              <p class="sm">
                单笔订单金额(不含运费)满88元免邮费;不满88元,每单收取10元运费。（港澳台地区需满500元免邮费；不满500元，每单收取30元运费)
              </p>
              <br />
              <p class="tit">• 使用什么快递发货?</p>
              <p class="sm">默认使用顺丰快递发货(个别商品使用其他快递）</p>
              <p class="sm">配送范围覆盖全国大部分地区(港澳台地区除外）</p>
              <br />
              <p class="tit">• 如何申请退货?</p>
              <p class="sm">
                1.自收到商品之日起30日内，顾客可申请无忧退货，退款将原路返还，不同的银行处理时间不同，预计1-5个工作日到账；
              </p>
              <p class="sm">2.内裤和食品等特殊商品无质量问题不支持退货；</p>
              <p class="sm">
                3.退货流程：
                确认收货-申请退货-客服审核通过-用户寄回商品-仓库签收验货-退款审核-退款完成；
              </p>
              <p class="sm">
                4.因小兔鲜儿产生的退货，如质量问题，退货邮费由小兔鲜儿承担，退款完成后会以现金券的形式报销。因客户个人原因产生的退货，购买和寄回运费由客户个人承担。
              </p>
            </div>
          </div>
        </div>
        <div class="bot-rig">
          <div class="hour24">
            <div class="h-tit">24小时热销榜</div>
            <div class="hour-card">
              <img src="" class="bot-img" alt="" />
              <div class="bb-dir">
                <p class="bot-dir">时尚百搭儿童毛衣11112222222222222111111</p>
                <p class="bot-dir2">柔软舒适毛衣，秋冬常备单品</p>
                <p class="bot-pri">$109.33</p>
              </div>
            </div>
          </div>
          <div class="hour24">
            <div class="h-tit">周销热榜</div>
            <div class="hour-card">
              <img src="" class="bot-img" alt="" />
              <div class="bb-dir">
                <p class="bot-dir">时尚百搭儿童毛衣11112222222222222111111</p>
                <p class="bot-dir2">柔软舒适毛衣，秋冬常备单品</p>
                <p class="bot-pri">$109.33</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import HeaderView from "@/components/HeaderView.vue";
export default {
  name: "detail",
  components: { HeaderView },
  props: ["skuImageList"],
  data() {
    return {
      num: 1,
      currentDate: [
        {
          id: 1,
          pr: 299,
        },
        {
          id: 2,
          pr: 399,
        },
        {
          id: 3,
          pr: 399,
        },
        {
          id: 4,
          pr: 599,
        },
      ],
      activeName: "first",
      imgURL: [
        {
          id: 1,
          url: "https://yanxuan-item.nosdn.127.net/c12d7a462c1d06556be03f54e56a770f.png",
        },
        {
          id: 2,
          url: "https://yanxuan-item.nosdn.127.net/c12d7a462c1d06556be03f54e56a770f.png",
        },
        {
          id: 3,
          url: "https://yanxuan-item.nosdn.127.net/c12d7a462c1d06556be03f54e56a770f.png",
        },
        {
          id: 4,
          url: "https://yanxuan-item.nosdn.127.net/c12d7a462c1d06556be03f54e56a770f.png",
        },
        {
          id: 5,
          url: "https://yanxuan-item.nosdn.127.net/c12d7a462c1d06556be03f54e56a770f.png",
        },
      ],
      value: [],
      options: [
        {
          value: "zhinan",
          label: "指南",
          children: [
            {
              value: "shejiyuanze",
              label: "设计原则",
              children: [
                {
                  value: "yizhi",
                  label: "一致",
                },
                {
                  value: "fankui",
                  label: "反馈",
                },
                {
                  value: "xiaolv",
                  label: "效率",
                },
                {
                  value: "kekong",
                  label: "可控",
                },
              ],
            },
            {
              value: "daohang",
              label: "导航",
              children: [
                {
                  value: "cexiangdaohang",
                  label: "侧向导航",
                },
                {
                  value: "dingbudaohang",
                  label: "顶部导航",
                },
              ],
            },
          ],
        },
      ],
      currentIndex: 0,
    };
  },
  computed: {
    ImageList() {
      return this.skuImageList[this.currentIndex] || {};
    },
  },
  mounted() {
    //全局事件总线获取兄弟组件传递过来的索引值
    this.$bus.$on("getIndex", (index) => {
      this.currentIndex = index;
    });
  },
  created() {
    // // 监听路由变化
    // this.$watch(
    //   () => this.$route.params,
    //   (toParams, previousParams) => {
    //     console.log(toParams);
    //   }
    // );
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handler(event) {
      let mask = this.$refs.mask;
      let big = this.$refs.big;
      let left = event.offsetX - mask.offsetWidth / 2;
      let top = event.offsetY - mask.offsetHeight / 2;
      //约束范围
      if (left <= 0) left = 0;
      if (left >= mask.offsetWidth) left = mask.offsetWidth;
      if (top <= 0) top = 0;
      if (top >= mask.offsetHeight) top = mask.offsetHeight;
      mask.style.left = left + "px";
      mask.style.top = top + "px";
      big.style.left = -2 * left + "px";
      big.style.top = -2 * top + "px";
    },
    open3() {
      // this.$message({
      //   message: "请选择完整规格",
      //   type: "warning",
      // });
      this.$router.push("/home/shoppingcar");
    },
  },
};
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
.all-box {
  width: 100%;
  background: #f5f5f5;
  height: 100%;

  .box {
    width: 1240px;
    background: #f5f5f5;
    margin: 0 auto;
    .mian {
      width: 1240px;
      height: 75px;
      line-height: 75px;
      font-size: 15px;
      background: #f5f5f5;
    }
    .top-box {
      height: 550px;
      background: white;
      display: flex;
      justify-content: flex-start;
      .t-l {
        width: 580px;
        //  background: rgb(154, 36, 217);
        background: white;
        // -------------------------------------------
        display: flex;
        justify-content: left;
        //  align-items: stretch;
        flex-wrap: wrap;
        .g-s-t {
          width: 580px;
          height: 378px;
          padding-left: 15px;
          padding-top: 15px;
          //  background: red;
          display: flex;
          justify-content: flex-start;
          .g-img {
            width: 420px;
            height: 370px;
            margin-right: 20px;
          }
          .sm-img-box {
            width: 100px;
            display: flex;
            align-items: flex-start;
            flex-wrap: wrap;
            .sm-img {
              width: 75px;
              height: 65px;
              margin-bottom: 7px;
            }
          }
        }
        //------------------------------------------
        // .spec-preview {
        //   position: relative;
        //   width: 400px;
        //   height: 400px;
        //   border: 1px solid #ccc;
        //   img {
        //       width: 100%;
        //       height: 100%;
        //     }
        //     .event {
        //       width: 100%;
        //       height: 100%;
        //       position: absolute;
        //       top: 0;
        //       left: 0;
        //       z-index: 998;
        //      }

        //       .mask {
        //         width: 50%;
        //         height: 50%;
        //         background-color: rgba(171, 250, 171, 0.3);
        //         position: absolute;
        //         left: 0;
        //         top: 0;
        //         display: none;
        //       }

        //       .big {
        //         width: 100%;
        //         height: 100%;
        //         position: absolute;
        //         top: -1px;
        //         left: 100%;
        //         border: 1px solid #aaa;
        //         overflow: hidden;
        //         z-index: 998;
        //         display: none;
        //         background: white;

        //           img {
        //             width: 200%;
        //             max-width: 200%;
        //             height: 200%;
        //             position: absolute;
        //             left: 0;
        //             top: 0;
        //           }
        //         }

        //       .event:hover ~ .mask,.event:hover ~ .big {
        //         display: block;
        //       }

        //     }
        //---------------------------------------
        .g-s-b {
          width: 370px;
          text-align: center;
          margin-left: 30px;
          font-size: 14px;
          height: 100px;
          background: #fff;
          display: flex;
          justify-content: space-around;
          margin-top: -50px;
          .line {
            height: 70px;
            margin-top: 20px;
            margin-right: 5px;
            margin-left: 5px;
          }
          .bb-box {
            display: flex;
            justify-content: flex-start;
            flex-wrap: wrap;
            align-items: stretch;
            margin: 10px 0;
            height: 100px;
            div {
              height: 20px;
              line-height: 20px;
              width: 83px;
            }
            .b1 {
              color: #999;
            }
            .b2 {
              color: #cf4444;
            }
            .b3:hover {
              color: #27ba9b;
            }
            .el-icon-s-flag {
              color: #27ba9b;
              margin-right: 3px;
            }
          }
        }
      }
      .t-r {
        width: 660px;
        background: white;
        padding-top: 15px;
        .t-r-t {
          .tr1 {
            font-weight: normal;
            margin-bottom: 10px;
            font-size: 22px;
          }
          .tr2 {
            color: #999;
            font-size: 14px;
            margin-bottom: 10px;
          }
          .tr3 {
            font-size: 22px;
            margin-bottom: 10px;
            color: #cf4444;
            .nopri {
              text-decoration: line-through;
              font-size: 17px;
              color: #999;
            }
          }
        }
        .t-r-m {
          width: 520px;
          background: #f5f5f5;
          padding-bottom: 0px;

          .g-service {
            background: #f5f5f5;
            width: 500px;
            padding: 20px 10px 0 10px;
            text-align: left;
            dl {
              display: flex;
              height: 40px;
              margin-bottom: 5px;
            }
            dt {
              display: block;
              color: #999;
              font-size: 14px;
            }
            dd {
              display: block;
              color: #666;
              font-size: 14px;
              margin-inline-start: 40px;
              .lian {
                color: #999;
              }
            }
          }
        }
        .t-r-b {
          display: flex;
          justify-content: flex-start;
          flex-wrap: wrap;
          .t-r-b-box {
            width: 520px;
            //   background: #f5f5f5;
            // background: pink;
            padding-bottom: 0px;
            display: flex;
          }
          .gui-tit {
            margin-right: 10px;
            width: 50px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            //   background: white;
            color: #999;
          }
          .guiimg {
            display: flex;
            .gui-img {
              width: 50px;
              height: 50px;
              margin: 3px 5px;
            }
            .gui-img:hover {
              cursor: pointer;
              //  border:solid 2px #27ba9b;
              outline: solid 2px #27ba9b;
            }
          }
        }

        .t-r-b-b {
          .t-r-b-b-box {
            display: flex;
            flex-wrap: wrap;
            width: 450px;
            height: 50px;
            line-height: 50px;
            .gui-num {
              margin-right: 10px;
              width: 50px;
              height: 50px;
              line-height: 50px;
              text-align: center;
              //   background: white;
              color: #999;
            }
            .btn-num {
              margin-top: 10px;
            }
          }
          .gocar {
            background: #27ba9b;
            color: #fff;
            width: 180px;
            height: 50px;
            font-size: 16px;
          }
        }
      }
    }

    .mid-box {
      width: 1240px;
      height: 370px;
      margin-top: 30px;
      margin-bottom: 30px;
      background: white;
      display: flex;
      justify-content: flex-start;
      //  align-items: flex-start;
      flex-wrap: wrap;
      .m-tit {
        width: 1240px;
        height: 40px;
        line-height: 40px;
        //  background: white;
      }
      .m-ban {
        width: 1240px;
        height: 250px;
        .time {
          font-size: 17px;
          color: red;
        }
        .el-card {
          border: none;
          box-shadow: none;
          margin-top: -20px;
        }

        .bottom {
          margin-top: 10px;
          line-height: 12px;
        }

        .image {
          width: 90%;
          display: block;
        }

        .clearfix:before,
        .clearfix:after {
          display: table;
          content: "";
        }

        .clearfix:after {
          clear: both;
        }
        .eel-carousel {
          indicator {
            width: 20px;
            height: 20px;
            border-radius: 50%;
          }
        }
        .el-carousel__item h3 {
          color: #475669;
          font-size: 18px;
          // opacity: 0.75;
          line-height: 300px;
          border: none;
          margin: 0;
        }

        .el-carousel__item:nth-child(2n) {
          background-color: #99a9bf;
        }

        .el-carousel__item:nth-child(2n + 1) {
          background-color: #d3dce6;
        }
      }
    }
    .bottom-box {
      background: #f5f5f5;
      width: 1240px;
      height: 100%;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      .bot-left {
        width: 930px;
        background: #f5f5f5;
        height: 100%;
        .b-l-t {
          width: 930px;
          height: 200px;
          background: white;
          margin-bottom: 10px;
        }
        .bot-bot {
          background: white;
          width: 930px;
          height: 600px;
          margin-top: 20px;
          .goods-warn {
            margin-top: 20px;
            background: #fff;
            padding-bottom: 40px;
            h3 {
              display: block;
              font-size: 1.17em;
              height: 60px;
              line-height: 60px;
              padding-left: 30px;
              margin-bottom: 20px;
              font-weight: normal;
              border-bottom: 1px solid #f5f5f5;
            }
            p {
              height: 40px;
              line-height: 40px;
              font-size: 14px;
              padding-left: 25px;
            }
            .sm {
              color: #666;
            }
          }
        }
      }
      .bot-rig {
        width: 280px;
        background: #f5f5f5;
        display: flex;
        align-items: stretch;
        flex-wrap: wrap;
        height: 100%;
        .hour24 {
          background: #f5f5f5;

          .h-tit {
            width: 270px;
            background: #e26237;
            height: 80px;
            line-height: 80px;
            color: white;
            font-size: 17px;
            padding-left: 10px;
            margin-bottom: 10px;
          }
          .hour-card {
            width: 280px;
            height: 370px;
            background: white;
            display: flex;
            align-items: stretch;
            justify-content: center;
            flex-wrap: wrap;
            .bot-img {
              width: 60%;
              height: 60%;
              margin-top: 20px;
            }
            .bb-dir {
              width: 60%;
              text-align: center;
              p {
                height: 40px;
                line-height: 40px;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
              }
              .bot-dir2 {
                font-size: 14px;
                color: #666;
              }
              .bot-pri {
                color: #cf4444;
                font-size: 20px;
              }
            }
          }
        }
      }
    }
  }
}
</style>
